<script setup lang="ts">
import { useMovie } from "./utils/hook.tsx";
import { Picture as IconPicture } from "@element-plus/icons-vue";
import HeaderPage from "./headerpage.vue";

defineOptions({
  name: "index"
});

const {
  router,
  avListStore,
  form,
  dataList,
  onSearch,
  pagination,
  handleSizeChange,
  handleCurrentChange
} = useMovie();
console.log("dataList:", dataList.value);
</script>

<template>
  <HeaderPage :onSearch="onSearch" :form="form" :router="router" />
  <div class="waterfall w-[98%] flex flex-col text-xs ml-8">
    <div class="">
      <el-row :gutter="10">
        <!-- list循环 -->
        <div
          v-for="(item, index) in dataList"
          :key="item.id"
          :xs="24"
          :sm="12"
          :md="10"
          :lg="8"
          :xl="3"
        >
          <el-col class="item w-[300px] h-[240px]">
            <el-card shadow="hover" body-style="padding: 0">
              <div class="photo-frame">
                <router-link :to="{ path: '/movie', query: { id: item.id } }">
                  <el-image
                    class="w-auto max-h-[150px] rounded-md rounded-b-none"
                    :src="item.bigimage"
                    :title="item.title"
                    loading="lazy"
                  >
                    <template #error>
                      <div class="image-slot">
                        <el-icon><icon-picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </router-link>
              </div>
              <div
                class="photo-info min-h-[65px] overflow-hidden text-red-500 leading-5 px-2 text-[13px]"
              >
                <span
                  v-copy:click="item.av_id"
                  class="cursor-pointer hover:text-blue-500 hover:font-bold"
                  >{{ item.av_id }}</span
                >
                / <span>{{ item.label }}</span> /
                <span>{{ item.series }}</span> /
                <span v-if="item.len">{{ item.len }} /</span>
                <span>{{ item.status >= 1 ? "完" : "" }}</span>
                <template v-if="item.status == 0">
                  <span
                    v-copy:click="item.m3u8"
                    class="text-[#26afff] font-bold cursor-pointer"
                  >
                    ₪</span
                  >
                </template>
                <div class="text-black leading-4 text-[13px]">
                  <!-- query传参模式 已完成 -->
                  <!-- <a class="" @click="toDetail(item, 'query')" target="_blank">
                    {{ item.title }}
                  </a> -->
                  <a
                    class=""
                    @click="
                      router.push({ path: '/movie', query: { id: item.id } })
                    "
                  >
                    {{ item.title }}
                  </a>
                </div>
              </div>
            </el-card>
          </el-col>
        </div>
      </el-row>
    </div>
    <div class="pagination h-12 flex justify-center">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :background="true"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.navbar {
  background-image: linear-gradient(to bottom, #eeeeeb 0, #fff 100%);
}
.item-title {
  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.demo-image__error .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
  max-height: 150px !important;
  width: auto !important;
}
</style>
